<template>
  <div v-show="total">
    <label>
      <input type="checkbox" :checked="isAll" @change="changeAll">
    </label>
    <span>
      <span>已完成{{ doneTotal }}</span>/全部{{ total }}
    </span>
    <button class="btn btn-danger" @click="clearAlldone">清除已完成任务</button>
  </div>
</template>

<script>
export default {
  name: "Status",
  props:["todos"],//"changeAllCheck","clearAlldone"],
  computed:{
    total(){
      return this.todos.length
    },
    isAll(){
        return this.total ===this.doneTotal && this.total > 0
    },
    doneTotal(){
      //利用过滤器
      // return this.todos.filter(todo=>todo.done==true).length
     return  this.todos.reduce((pre,current)=>{
        return pre + (current.done?1:0)
      },0)
    }
  },
  methods:{
    changeAll(e){
      console.log(e.target.checked)
      this.$emit("changeAllCheck",e.target.checked)
    },
    clearAlldone(){
      this.$emit("clearAlldone")
    }
  }
}
</script>

<style scoped>

</style>
